<template>
  <div class="body">
    <van-nav-bar title="发布房源">
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="white"
          @click="$router.go(-1)"
        />
      </template>
    </van-nav-bar>

    <van-form v-if="flag" ref="form">
      <template>
        <van-cell-group>
          <van-field label="房源信息" readonly />
        </van-cell-group>
        <van-cell-group>
          <van-field
            v-model="houseName"
            label="小区名称"
            placeholder="请输入小区名称  〉"
            input-align="right"
            readonly
            @click="$router.push('/community')"
          />
        </van-cell-group>
        <van-field
          v-model="form.price"
          name="租金"
          label="租金"
          placeholder="请输入租金/月"
          :rules="[{ required: true, message: '请填写租金' }]"
        >
          <template #right-icon>
            <span>￥/月</span>
          </template>
        </van-field>
        <van-field
          v-model="form.size"
          name="建筑面积"
          label="建筑面积"
          :rules="[{ required: true, message: '请填写建筑面积' }]"
        >
          <template #right-icon>
            <span>㎡</span>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          name="picker"
          :value="roomType"
          label="户型"
          placeholder="请选择  〉"
          @click="showPicker1 = true"
          input-align="right"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="houseTypeList"
            @cancel="showPicker1 = false"
            @confirm="chooseType"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="floor"
          :value="floor"
          label="所在楼层"
          placeholder="请选择  〉"
          @click="showPicker2 = true"
          input-align="right"
        />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="houseFloorList"
            @cancel="showPicker2 = false"
            @confirm="chooseFloor"
          />
        </van-popup>

        <van-field
          readonly
          clickable
          name="for"
          :value="oriented"
          label="朝向"
          placeholder="请选择  〉"
          @click="showPicker3 = true"
          input-align="right"
        />
        <van-popup v-model="showPicker3" position="bottom">
          <van-picker
            show-toolbar
            :columns="houseTowardsList"
            @cancel="showPicker3 = false"
            @confirm="chooseTowards"
          />
        </van-popup>

        <van-field label="房屋标题" readonly />

        <van-field
          v-model="form.title"
          placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
          :rules="[{ required: true, message: '请填写标题' }]"
        />

        <van-field
          name="uploader"
          label="房屋头像"
          readonly
          :rules="[{ required: true, message: '请上传照片' }]"
        />
        <van-field name="uploader">
          <template #input>
            <van-uploader
              v-model="form.houseImg"
              accept="image/*"
              multiple
              :after-read="afterRead"
              type="file"
            />
          </template>
        </van-field>

        <van-field name="uploader" label="房屋配置" readonly />
        <van-grid :column-num="5" :border="false" class="configure">
          <van-grid-item
            v-for="(item, index) in iconList"
            :key="index"
            :text="item.text"
            @click="clickIcon(item.text, $event)"
            :ref="item.text"
          >
            <template #icon>
              <van-icon
                class="iconfont"
                class-prefix="icon"
                :name="item.icon"
              />
            </template>
          </van-grid-item>
        </van-grid>

        <van-field label="房屋描述" readonly />
        <van-field
          type="textarea"
          name="textarea"
          placeholder="请输入房屋描述信息"
          v-model="form.description"
          :rules="[{ required: true, message: '请填写房屋描述信息' }]"
        />
        <div class="footer">
          <div class="btn2" @click="$router.go(-1)">取消</div>
          <div class="btn3" @click="submitForm">提交</div>
        </div>
      </template>
    </van-form>
  </div>
</template>

<script>
import { getHouseList, setHouse} from '@/api/house'
import { setKeys } from '@/utils/processData'
import { arr } from '@/utils/icon'
import axios from 'axios'
export default {
  name: 'PublishHouse',
  props: {},
  data () {
    return {
      fileList:[],
      houseTypeList: [],
      houseFloorList: [],
      houseTowardsList: [],
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      iconList: arr,
      flag: false,
      houseName: this.$route.query.text || '',
      roomType: '',
      floor: '',
      oriented: '',
      form: {
        community: this.$route.query.community || '',
        price: 0,
        size: '',
        roomType: '',
        floor: '',
        oriented: '',
        title: '',
        houseImg: [],
        supporting: [],
        description: ''
      }
    }
  },
  async created () {
    if (!this.flag) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
    }
    const { data } = await getHouseList()
    setKeys(data.body.roomType, this.houseTypeList)
    setKeys(data.body.floor, this.houseFloorList)
    setKeys(data.body.oriented, this.houseTowardsList)
    this.flag = true
  },
  methods: {
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    clickIcon (text) {
      console.log(this.$refs)
      const father = this.$refs[text][0].$el
      const son = this.$refs[text][0].$el.children[0].children[1]
      if (father.classList.value.includes('green')) {
        this.form.supporting = this.form.supporting.filter(
          item => item !== text
        )
        father.classList.remove('green')
        son.classList.remove('green')
      } else {
        this.form.supporting.push(text)
        father.classList.add('green')
        son.classList.add('green')
      }
    },
    chooseType (value) {
      this.roomType = value.text
      this.form.roomType = value.value
      this.showPicker1 = false
    },
    chooseFloor (value) {
      this.floor = value.text
      this.form.floor = value.value
      this.showPicker2 = false
    },
    chooseTowards (value) {
      this.oriented = value.text
      this.form.oriented = value.value
      this.showPicker3 = false
    },
   async afterRead (file) {
      const fd = new FormData()
      fd.append('file',file.file)
    const data=  await axios.post('http://liufusong.top:8080/houses/image',fd,{
          headers: {
            "content-type": "multipart/form-data",
            token: localStorage.getItem('my_token'),
          },
        })
      this.form.houseImg =data.body[0]
    },
    async submitForm () {
      this.form.supporting = this.form.supporting.join('|')
      console.log(this.form);
      const {data} = await setHouse(this.form)
      if(data.status===200){
        this.$toast.success('发布成功')
      }
      else{
        this.$toast.fail(data.description)
      }
    }
  }
}
</script>

<style scoped lang="less">
.body {
  background-color: #ccc;
  margin-bottom: 50px;
}
.van-nav-bar {
  background-color: #23d881 !important;
}
.van-nav-bar .van-icon {
  color: white !important;
}
.van-form {
  span {
    color: #ccc;
  }
}
/deep/.green {
  color: #23d881 !important;
}
/deep/.configure {
  margin-bottom: 20px;
}
.footer {
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  color: #333;
  font-size: 17px;
  background-color: #fff;
  div {
    flex: 1;
  }
  .btn3 {
    background-color: #23d881;
    color: #fff;
  }
}
</style>
